<template>
	<view>
		<u-navbar back-icon-color="#f1f1f1" title-color="#f1f1f1" title="产品反馈" :background="navbarBackground"></u-navbar>
		<view class="main">
			<scroll-view scroll-y>
				<view class="type">
					<u-section title="咨询类型" font-size="28" line-color="#3B6AB6" :right="false"></u-section>
					<view class="type-content">
						<view class="tags">
							<text :class="current == '产品建议' ? 'choosed' : ''" @tap="current = '产品建议'">产品建议</text>
							<text :class="current == '购买咨询' ? 'choosed' : ''" @tap="current = '购买咨询'">购买咨询</text>
							<text :class="current == 'BUG' ? 'choosed' : ''" @tap="current = 'BUG'">BUG</text>
							<text :class="current == '其他' ? 'choosed' : ''" @tap="current = '其他'">其他</text>
						</view>
						<u-input type="textarea" v-model="feedback" height="200" :custom-style="customStyle" placeholder="请您认真填写反馈意见,我们一定会用心服务每一个反馈"></u-input>
						<u-input v-model="contact" :custom-style="customStyle" placeholder="请留下您的联系方式(手机号码/微信号/QQ)"></u-input>
					</view>
				</view>
				<view class="upload">
					<u-section title="上传图片" font-size="28" line-color="#3B6AB6" :right="false"></u-section>
					<view class="image">
						<u-upload :action="action" :show-progress="false" max-count="3" :disabled="lists.length > 3" ref="uUpload" del-bg-color="rgba(0,0,0,0.5)"></u-upload>
					</view>
					<text class="sub">添加截图（不超过3张）</text>
				</view>
			</scroll-view>
		</view>
		<view class="btns"><u-button class="btn" :custom-style="btnStyle" :ripple="true" ripple-bg-color="#8EB7FA" @click="handleSubmit">提交</u-button></view>
	</view>
</template>

<script>
import { devUrl } from '../../../common/request.js';
export default {
	data() {
		return {
			navbarBackground: {
				backgroundImage: 'linear-gradient(90deg, rgb(27,52,92), rgb(49,84,142))'
			},
			btnStyle: {
				backgroundColor: '#3d6fc1',
				color: '#f1f1f1'
			},
			current: '',
			customStyle: {
				flex: '1',
				backgroundColor: '#F3F3F5',
				padding: '15rpx',
				borderRadius: '15rpx',
				marginTop: '30rpx',
				lineHeight: '1.5'
			},
			feedback: '',
			contact: '',
			action: '',
			lists: []
		};
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		this.action = devUrl + '/api/Common/uploadImg';
	},
	onReady() {
		this.lists = this.$refs.uUpload.lists;
	},
	methods: {
		handleSubmit() {
			if (this.current == '') {
				uni.showToast({
					title: '请选择咨询类型',
					icon: 'none'
				});
				return false;
			} else if (this.feedback == '') {
				uni.showToast({
					title: '请填写您的反馈意见',
					icon: 'none'
				});
				return false;
			} else if (this.contact == '') {
				uni.showToast({
					title: '请填写您的联系方式',
					icon: 'none'
				});
				return false;
			} else if (this.lists.length < 1) {
				uni.showToast({
					title: '请添加截图',
					icon: 'none'
				});
				return false;
			} else {
				let images = this.lists.map(item => {
					return item.response.data;
				});
				let params = {
					name: this.current,
					content: this.feedback,
					contact: this.contact,
					images: images.toString()
				};
				this.$tkRequest('/api/User/feedback', params).then(res => {
					uni.showToast({
						title: res.msg
					});
					setTimeout(() => {
						uni.switchTab({
							url: '../mine'
						});
					}, 1500);
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	padding: $uni-spacing-col-lg $uni-spacing-row-lg;

	scroll-view {
		max-height: 100vh;
	}

	.type {
		padding: $uni-spacing-col-lg 0;
		font-size: 12pt;

		.type-content {
			padding: 45rpx 0;

			.tags {
				display: flex;
				align-items: center;
				justify-content: space-around;
				flex-wrap: wrap;

				text {
					width: 23%;
					background-color: #f3f3f5;
					text-align: center;
					padding: 12rpx 10rpx;
					border-radius: 30rpx;
					font-size: 10pt;
				}

				.choosed {
					transition: all 0.3s;
					background-color: #3867b5;
					color: #f1f1f1;
				}
			}
		}
	}

	.upload {
		margin-bottom: 128rpx;

		.image {
			padding: $uni-spacing-col-lg 0;
		}

		.sub {
			font-size: 10pt;
		}
	}
}
.btns {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: $uni-spacing-col-lg $uni-spacing-row-lg;
}
</style>
